<template>
	<div>
		<div class='content-box m-t-30'>
			<el-table class='f-12' :data='deviceList' style='width:100%;' @selection-change='handleSelectionChange'>
				<el-table-column type='selection' width='55'></el-table-column>
				<el-table-column label='设备号'>
					<template slot-scope='scope'>{{ scope.row.device_no }}</template>
				</el-table-column>
				<el-table-column label='设备名称'>
					<template slot-scope='scope'>{{ scope.row.device_name }}</template>
				</el-table-column>
				<el-table-column label='在线状态'>
					<template slot-scope='scope'>
						<span :class='{"color-67c23a" : scope.row.online == 1, "color-f56c6c" : scope.row.online == 0 }'>{{connectStatusList[scope.row.online]}}</span>
					</template>
				</el-table-column>
				<el-table-column label='所属代理商' v-if='checkPermission("admin")'>
					<template slot-scope='scope'>{{ scope.row.agent_name || '' }}</template>
				</el-table-column>
				<el-table-column label='所属门店' v-if='checkPermission("admin", "agent")'>
					<template slot-scope='scope'>{{ scope.row.store_name || '' }}</template>
				</el-table-column>
				<el-table-column label='所属网关' v-if='checkPermission("admin")'>
					<template slot-scope='scope'>
						{{scope.row.gateway }}
					</template>
				</el-table-column>
				<el-table-column label='端口数'>
					<template slot-scope='scope'>
						{{scope.row.port_number }}
					</template>
				</el-table-column>
				<el-table-column label='充电价格'>
					<template slot-scope='scope'>
						<el-popover
							v-if='scope.row.charge_price'
							trigger='hover'>
							<div style="line-height:24px;font-size:12px;padding:5px 0px">
								<div>扫码预设选择:</div>
								<div style='overflow:hidden;width:130px;'>
									<div v-if='scope.row.charge_price.options' v-for='item in scope.row.charge_price.options' style='float:left;padding:0px 5px;'>{{item.a}}元{{item.q}}小时</div>
								</div>
								<div>预付费：{{scope.row.charge_price.prepayment}}元</div>
								<div style='overflow:hidden;width:130px;'>
									<div v-if='scope.row.charge_price.class_rate' v-for="item in scope.row.charge_price.class_rate" style='float:left;padding:0px 5px;'>{{item.q}}分钟{{item.w}}瓦</div>
								</div>
							</div>
							<router-link v-if='scope.row.charge_price.owner' slot='reference' class='color-primary' :to='"/price/edit/" + scope.row.price_id'>{{scope.row.charge_price.price_name }}</router-link>
							<span class='color-primary'  slot='reference' v-else>{{scope.row.charge_price.price_name }}</span>
						</el-popover>
						
					</template>
				</el-table-column>
				<el-table-column fixed='right' label='操作' width='150'>
					<template slot-scope='scope'>
						<!-- <el-button v-if='checkPermission("admin")' @click='openAllotAgent(scope.row.deviceNo)' size='mini' type='text'>分配</el-button>
						<el-button v-if='checkPermission("agent")' @click='openAllotStore(scope.row.deviceNo)' size='mini' type='text'>分配</el-button> -->
						<router-link class='m-l-5' :to='"/device/edit/" + scope.row.device_id'><el-button size='mini' type='text'>编辑</el-button></router-link>
						<router-link class='m-l-5' :to='"/device/detail/" + scope.row.device_id'><el-button size='mini' type='text'>详情</el-button></router-link>
						<el-button v-if='checkPermission("admin")' class='m-l-5' size='mini' type='text' @click='deleteDevice(scope.row.deviceNo)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class='m-t-30'>
				<pagination ref='pagination' :query='pageQuery' v-on:page='pageList' url='device/deviceList'></pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>

</style>
